SideButton Dashboard Skill for MCP Agent

What This Is

SideButton Dashboard is the web-based management interface for the SideButton AI Agent Platform. It runs locally at localhost:9876 and provides a GUI for managing skill packs, browsing workflow libraries, launching autonomous agents, recording browser interactions, and configuring AI context (persona, roles, targets, LLM provider). The dashboard is a Svelte 5 SPA served by the Fastify server.

Authentication

No authentication required — the dashboard is local-only, served on localhost:9876. Access is implicit when the SideButton server is running.

Global Navigation

Left Sidebar (nav.drawer)

Element	Selector	Route	Notes
SideButton logo + heading	heading "SideButton"	—	SVG logo + "SideButton" h1 + status dot (green=server connected, amber=disconnected)
Dashboard	button:has-text("Dashboard")	/	First nav item. Home page with overview stats
Skills	button:has-text("Skills")	/skills	Installed skill packs management
Library	button:has-text("Library")	/library	Workflow library and publishers
Agents	button:has-text("Agents")	/agents	Autonomous agent launcher
Recordings	button:has-text("Recordings")	/recordings	Browser interaction recordings
Browser status	.browser-status	—	Footer indicator. Green "Browser Connected" / amber "Browser Disconnected". Polls every 3s
Settings	button:has-text("Settings")	/settings	Footer nav item. AI Context and LLM Provider config

Floating Elements

Element	Selector	Notes
Toast notifications	Toast component	Top-right overlay. Auto-hides after ~3s. Shows success (green), error (red), warning (amber)

Key Sections

Section	URL Pattern	Purpose
Dashboard	/	Overview stats (roles, targets, skill packs, persona) + skill pack shortcuts
Skills	/skills	Installed skill packs list with ON/OFF toggles
Skill Detail	/skills/:domain	Single skill pack expanded view
Module Detail	/skills/:domain/:module	Module-level skill documentation
Library	/library	Installed packs (other publishers) + publisher management
Agents	/agents	Autonomous agent list and launcher
Agent Detail	/agents/:id	Single agent status and config
Recordings	/recordings	Browser recording list and playback
Recording Detail	/recordings/:id	Single recording playback
Settings	/settings	AI Context (Persona/Roles/Targets/Integrations/Inline) + LLM Provider
Run Logs	/run-logs	Workflow execution history with KPI stats
Run Log Detail	/run-logs/:id	Individual run log with event timeline

Internal Views (No URL)

View	Trigger	Description
Execution	navigateToExecution()	Live workflow execution monitor with log streaming
Run Logs	navigateToRunLogs()	Workflow execution history
Run Log Detail	navigateToRunLogDetail(id)	Single execution log

Legacy Redirects

Old URL	Redirects To
/actions	/skills
/actions/:id	/skills
/workflows	/library
/workflows/:id	/library

Architecture

• Framework: Svelte 5 SPA with navaid client-side router
• Server: Fastify on port 9876 (serves SPA + REST API + WebSocket + MCP)
• Routing: Hash-less client-side routing via navaid. Direct URL navigation hits API (404) unless SPA is loaded first
• State: Svelte stores for reactive state management
• API: REST endpoints under /api/* for all CRUD operations

Module Inventory

Module	Features	_skill.md	qa.md	se.md	Brief Description
dashboard	~5	96%	45%	—	Home page with stats and skill pack shortcuts
skills	~12	96%	45%	—	Skill pack list, ON/OFF toggle, expand detail, roles, modules, workflows, install, uninstall
library	~7	96%	45%	—	Installed packs, publisher management, catalog browsing, search, install/update
agents	~7	98%	70%	—	Agent list, start agent modal (role + prompt), waiting/running/completed states, stop, resend, view logs
recordings	~7	96%	45%	—	Recording list, start/stop, event timeline, delete, convert to workflow, AI convert
settings	~20	97%	75%	—	AI Context (persona, roles, targets, integrations, inline) + LLM Provider config
run-logs	~10	96%	45%	—	Run logs list with KPIs, run log detail, live execution monitor